<style lang="scss" scoped>
.order-show-state {
	height: 39rpx;
	padding: 0 8rpx;
	border-radius: 4rpx;
	display: inline-flex;
	align-items: center;
}

.order-show-state-title {
	$height: 18rpx;
	height: $height;
	line-height: $height;
	font-size: $height;
	color: #FFF;
	margin-left: 8rpx;
}

.order-show-state-1 {
	background: linear-gradient(90deg,#68DE66,#47C873);
}

.order-show-state-2 {
	background: linear-gradient(90deg,#FEE2D3,#FFCCB2);
}

.order-show-state-3 {
	background:linear-gradient(90deg,#4DE3FF,#32B9FF);
}

.order-show-state-4 {
	background:linear-gradient(90deg,#FF5C47,#EC3560);
}

.order-show-state-2 .order-show-state-title {
	color: #FC6608;
}

</style>

<template>
	<view class="order-show-state" :class="'order-show-state-'+state">

		<template v-if="1 == state">
			<image class="order-show-state-icon" src="/static/order/show/state-1.png" style="width:17rpx;height:15rpx;"></image>
			<view class="order-show-state-title">等待放映</view>
		</template>

		<template v-if="2 == state">
			<image class="order-show-state-icon" src="/static/order/show/state-2.png" style="width:16rpx;height:16rpx;"></image>
			<view class="order-show-state-title">入场观影</view>
		</template>

		<template v-if="3 == state">
			<image class="order-show-state-icon" src="/static/order/show/state-3.png" style="width:17rpx;height:15rpx;"></image>
			<view class="order-show-state-title">放映结束</view>
		</template>

		<template v-if="4 == state">
			<image class="order-show-state-icon" src="/static/order/show/state-4.png" style="width:17rpx;height:15rpx;"></image>
			<view class="order-show-state-title">未入场观影</view>
		</template>

	</view>
</template>

<script>
export default {
	
	props: {

		state: {
			type: Number,
			required: true,
		}

	},

}
</script>